<template>
	<view class="container bg-white">
		<view class="text-lg text-center padding-top-xl">
			请选择您的饮食禁忌，我们将减少相关菜品推荐
		</view>
		<view class="flex flex-wrap text-c9">
			<view v-for="(item,index) in list" :key="index" :class="{act:item.select}" @click="item.select=!item.select" class="d_ib vbitem text-lg">
				{{item.name}}
			</view>
		</view>
		<view class="full_btn fixed">
			<view class="mbtn" @click="submit">
				保存
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	// import { onShow } from '@dcloudio/uni-app';
	// onShow(() => {})
	const list = ref([
		{
			id:'',
			name:'不吃辣',
			select:false
		},
		{
			id:'',
			name:'葱',
			select:false
		},
		{
			id:'',
			name:'姜',
			select:false
		},
		{
			id:'',
			name:'胡椒',
			select:false
		},
		{
			id:'',
			name:'香菜',
			select:false
		},
		{
			id:'',
			name:'海鲜',
			select:false
		},
		{
			id:'',
			name:'蒜',
			select:false
		},
		{
			id:'',
			name:'菌菇',
			select:false
		},
		{
			id:'',
			name:'鱼类',
			select:false
		},
		{
			id:'',
			name:'贝类',
			select:false
		},
		{
			id:'',
			name:'发物',
			select:false
		},
		{
			id:'',
			name:'内脏',
			select:false
		},
		{
			id:'',
			name:'咸菜',
			select:false
		},
		{
			id:'',
			name:'芒果',
			select:false
		},
		{
			id:'',
			name:'韭菜',
			select:false
		},
		{
			id:'',
			name:'肥肉',
			select:false
		}
		
		
	])
	
	const submit = ()=>{}
	
</script>

<style lang="scss">
.vbitem{
	@include centBox(200rpx,80rpx);
	border-radius: 80rpx;
	border: 1px solid #999;
	margin: 32rpx 0 0 38rpx;
	&.act{
		background: $bg-color-base;
		color: $base-color;
		border: 1px solid $base-color;
	}
}
	
</style>
